import React, { Component } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import './swiper.css';
export default class Myswiper extends Component {
    constructor() {
        super();
        this.state = {
            swiperBg: 0,
            myswiper: null//保存轮播对象
        }
    }
    render() {
        let { swiperArr, swiperBg } = this.props;
        return (
            <div >
                <Swiper className='myswiper'
                    modules={[Pagination, Autoplay]}
                    pagination={{ clickable: true }}
                    onSlideChange={(swiper) => {
                        // this.props.onchange(swiper.realIndex);
                    }
                    }
                    onSwiper={(swiper) => console.log(swiper)}
                    autoplay={{ delay: 2000 }}
                    loop={true}
                >
                    {
                        swiperArr.map((item, index) =>
                            <SwiperSlide key={index}><img src={item.pictureURL} alt=""></img></SwiperSlide>)
                    }
                </Swiper>
            </div>
        )
    }
}
